<template>
  <div class="app">
    <div id="main_category3" ref="main" style="height: 300px"> </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category3"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '环状图',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '25%',
          right: '15%',
          itemHeight: 7,
          icon: 'circle'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['35%', '45%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>